<style>
</style>

<template>
  <div class="manage-wrap">
    <div class="operation-panel">
      <Row>
        <Col span="24">
          <Poptip width="400" title="搜索" placement="bottom-end" class="float-r">
            <Button type="primary" size="large" icon="ios-search">搜 索</Button>
            <div style="text-align:center" slot="content">
              <Form
                ref="searchForm"
                :model="searchForm"
                :label-width="80"
                value="true"
                style="min-width:200px;padding-top:20px;border-top:1px solid #a3adba;border-bottom:1px solid #a3adba;"
              >
                <Row>
                  <Form-item label="SIM卡号">
                    <Input v-model="searchForm.sim"></Input>
                  </Form-item>
                </Row>
              </Form>
              <Row>
                <Button
                  style="margin-left:5px;margin-top:10px;float:right;background-color: #5bc0de;color:#fff"
                  size="small"
                  @click="doSearchTableList"
                >确定</Button>
                <Button style="float:right;margin-top:10px;" size="small" @click="resetSearch">重置</Button>
              </Row>
            </div>
          </Poptip>
          <Button
            @click="refreshData"
            type="success"
            class="float-r"
            style="margin-right:10px;"
            size="large"
            icon="md-refresh"
          >刷新</Button>
        </Col>
      </Row>
    </div>

    <!--table-->
    <Row>
      <Table stripe size="small" :columns="tableColums" :data="tableData" :loading="tableLoading"></Table>
    </Row>
    <Row>
      <Page
        :total="total"
        :page-size="currentPageSize"
        :current="currentPage"
        @on-change="changeCurrentPage"
        @on-page-size-change="changePageSize"
        show-total
        show-sizer
        style="float:right;margin-top:10px"
      ></Page>
    </Row>
  </div>
</template>

<script>
import { getAlarmList } from "@/api/operate";
export default {
  data() {
    return {
      tableColums: [
        {
          type: "index",
          width: 60,
          title: "序号",
          align: "center"
        },
        {
          align: "center",
          title: "SIM卡号",
          key: "sim"
        },
        {
          align: "center",
          title: "IMEI",
          key: "imei"
        },
        {
          align: "center",
          title: "位号编码",
          key: "installCode"
        },
        {
          align: "center",
          title: "所属部门",
          key: "depName"
        },
        // {
        //   align: "center",
        //   title: "经度",
        //   key: "lat"
        // },
        // {
        //   align: "center",
        //   title: "纬度",
        //   key: "lng"
        // },
        // {
        //   align: "center",
        //   title: "电池电量",
        //   key: "battery"
        // },
        // {
        //   align: "center",
        //   title: "信号强度",
        //   key: "signalStrength"
        // },
        // {
        //   align: "center",
        //   title: "是否报警",
        //   key: "isAlarm",
        //   render: (h, params) => {
        //     const row = params.row;
        //     return h(
        //       "Tag",
        //       {
        //         props: {
        //           type: "dot",
        //           color: this.renderIsAlarmColor(row.isAlarm)
        //         }
        //       },
        //       this.renderIsAlarm(row.isAlarm)
        //     );
        //   }
        // },
        {
          align: "center",
          title: "数据时间",
          key: "dataTime"
        }
      ],
      tableData: [],
      tableLoading: false,
      total: 0,
      currentPage: 1,
      currentPageSize: 20,
      btnLoading: false,
      searchForm: {
        sim: "",
        size: 10,
        current: 1
      }
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getTableList();
  },
  methods: {
    resetSearch() {
      this.searchForm.sim = "";
    },
    doSearchTableList() {
      this.currentPage = 1;
      this.getTableList();
    },
    async getTableList() {
      this.tableLoading = true;
      let params = this.searchForm;
      params.current = this.currentPage;
      params.size = this.currentPageSize;
      const result = await getAlarmList(params);
      if (result.code == 0) {
        let res = result.data;
        this.total = res.total;
        this.tableData = res.records;
      }
      this.tableLoading = false;
    },
    changeCurrentPage(num) {
      this.currentPage = num;
      this.getTableList();
    },
    changePageSize(pageSize) {
      this.currentPageSize = pageSize;
      this.getTableList();
    },
    renderIsAlarm(isAlarm) {
      let status = "";
      if (isAlarm == true) {
        status = "是";
      } else if (isAlarm == false) {
        status = "否";
      }
      return status;
    },
    renderIsAlarmColor(isAlarm) {
      let color = "default";
      if (isAlarm == true) {
        color = "error";
      } else if (isAlarm == false) {
        color = "success";
      }
      return color;
    },
    refreshData() {
      this.resetSearch();
      this.getTableList();
    }
  }
};
</script>
